<template>
  <div class="drawer">
    <div class="shaw" v-if= "questionPop" @click="hideDrawer"></div>
    <div class="drawer-contern" :class = "questionPop ? 'trans-footer' : '' ">
        <h4>选择问题的分类</h4>
        <div class="list">
            <text  v-for ="(item, index) in questionSort" :key ="index" :class="hasCheck == index ? 'checked' : ''" @click="choseQuestion(index)">{{item}}</text>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
      questionSort: {
          type: Array,
          required: true
      },
      questionPop: {
          type: Boolean,
          default: false,
      }
  },
  data () {
      return {
          hasCheck: 0,
      } 
  },
  methods: {
      choseQuestion (index) {
          console.log(index)
          this.questionPop = !this.questionPop;
          this.hasCheck = index;
      },
      hideDrawer () {
          console.log(11)
          this.questionPop = !this.questionPop;
      }
  }
}
</script>

<style lang="scss" scoped>
.drawer{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1000;
}
.shaw{
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .6;
}
.section{
    width: 692rpx;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fff;
    padding: 0 30rpx;
    border-radius: 12rpx 12rpx 0 0;
    transition: all .3s;
    h4{
        height: 106rpx;
        line-height: 106rpx;
        font-size: 38rpx;
        font-weight: 600;
        color: #000;
        border-bottom: 1px solid #eaeaea;
    }
    .list{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-bottom: 40rpx;
        text{
            width: 335rpx;
            height: 78rpx;
            text-align: center;
            line-height: 78rpx;
            border-radius: 10rpx;
            color: #636267;
            border: 1px solid #e6e6e6;
            margin-top: 40rpx;
        }
        .checked {
            color: #1855ac;
            border-color: #74838c;
        }
        .aa {
            color: #1855ac;
            border-color: #74838c;
        }
    }
}
.trans-footer{
    transform: translateY(100%)
}
</style>
